// 选择地区Region
import React, { Component } from 'react'
import Header from '@/components/HeadOut'
import style from './region.module.scss';
import { connect } from 'react-redux'
import { changeCurrentLocationAction } from '@/store/modules/Region/regionActiveCreate.js'

class Region extends Component {
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    render() {
        return (
            <div className={style.regionListBox}>
                <Header title='城市选择' />
                <div className={style.search}>
                    <i className='iconfont icon-fangdajing searchInputFangDa'></i>
                    <input type="text" className={style.searchInput} placeholder='输入城市名或者拼音' />
                </div>
                <div className={style.alphabetBox}>
                    <ul className={style.alphabet}>{this.letterSortRight()}</ul>
                    {this.isPlace()}
                    <ul>{this.cityListSort()}
                        <li></li>
                    </ul>
                </div>
            </div>
        )
    }
    letterSortRight = () => {
        return this.props.regionList?.alphabet?.map((item, index) => {
            return (<li key={index} onClick={() => { this.scrollToAnchor('activity' + item) }}>{item}</li>)
        })
    }
    cityListSort = () => {
        return this.props.regionList?.cityList?.map((item, index) => {
            return (
                <li key={index} id={'activity' + item.idx}>
                    <p className={style.cityTitle}>{item.idx}</p>
                    {
                        item.cities.map((item, index) => {
                            return (<div onClick={() => { this.props.changeCurrentLocation(item) }} className={style.cityListItem} key={index}>
                                {item.name}
                            </div>)
                        })
                    }
                </li>
            )
        })
    }
    scrollToAnchor = (anchorName) => {
        console.log(anchorName);
        if (anchorName) {
            // 找到锚点
            let anchorElement = document.getElementById(anchorName);
            // 如果对应id的锚点存在，就跳转到锚点
            if (anchorElement) { anchorElement.scrollIntoView({ block: 'start', behavior: 'smooth' }); }
        }
    }
    isPlace = () => {
        if (this.props.currentLocation.name) {
            return (
                <>
                    <div className={style.selectedArea}>选中的地区</div>
                    <p className={style.cityListItem}>{this.props.currentLocation.name}</p>
                </>
            )
        }
    }
}

const stateToProps = (state) => {
    return {
        currentLocation: state?.region?.currentLocation || {},
        regionList: state?.region?.regionList || {},
        LocationSelected: state?.shipping?.LocationSelected || {},
    }
}

const dispatchToProps = (dispatch) => {
    return {
        changeCurrentLocation: (value) => {//修改所在位置
            let action = { value }
            dispatch(changeCurrentLocationAction(action))
        }
    }
}


export default connect(stateToProps, dispatchToProps)(Region)